import React, {Fragment} from "react";
import {OtherWayContainer, Space, Span, Ways} from "../style";
import {connect} from "react-redux";
import {actions} from "../store";
import {Button, Form, Input} from "antd";
import EventBus from "@/util/EventBus";
import {INIT_USER_INFO_SAGA} from "@/store/common/user/type";
import {VCode} from "@/style/VCode";
import BuildVCode, {SaveInputVCode} from "@/util/BuildVCode";
import Config from "@/config";
import {errorMsg, queryState} from "@/util/global";
import './style.css'
import {LockOutlined, UserOutlined} from "@ant-design/icons";
import PolishConfirm from "@/common/Modal/PolishConfirm";

class LoginView extends React.Component {
    constructor(props) {
        super(props);
        this.handleKeyDown = this.handleKeyDown.bind(this);
        this.forgetPassword = this.forgetPassword.bind(this);
        EventBus.addListener('login', (boolean) => {
            if (boolean === true) {
                document.removeEventListener('keydown', null);
                props.history.push('/home');
            }
        });
        this.state = {
            isNoneCode : true,
            confirmVisible:false
        }

    }
    forgetPassword(){
        this.setState({confirmVisible: true})
    }

    componentDidMount() {
        // 生成验证码
        // BuildVCode('feature-page-vcode');
        document.addEventListener('keydown', this.handleKeyDown)
    }

    componentWillUnmount() {
        // 移除事件监听器
        document.removeEventListener('keydown', this.handleKeyDown);
        // 清除已填写的信息，保护隐私
        this.props.handleInputAccount('');
        this.props.handleInputPassword('');
        SaveInputVCode('');
    }

    handleKeyDown(e) {
        if (e.code === 'Enter') {
            this.props.Login()
        }
    }

    render() {
        const {handleInputAccount, handleInputPassword, account, password, Login, VerificationCode} = this.props
        return <Fragment>
            <Form>
                <Input
                    // type={'account'}
                    // key={'account'}
                    prefix={<UserOutlined style={{color: '#999', padding: '0 5px'}}/>}
                    onChange={(e) => handleInputAccount(e.target.value)}
                    placeholder={'你的账号 / 手机号'}
                    value={account}
                />
                <Space/>
                <Input.Password
                    prefix={<LockOutlined style={{color: '#999', padding: '0 5px'}}/>}
                    onChange={(e) => handleInputPassword(e.target.value)}
                    placeholder={'密码'}
                    clearable
                    value={password}/>
                <Space/>
                <Input
                    placeholder={"请输入验证码"}
                    prefix={<Config.IconFont type={'icon-yanzhengyanzhengma'} style={{
                        width: '24px',
                        textAlign: 'center',
                        color: '#7ec460'
                    }}/>}
                    suffix={
                        this.state.isNoneCode ?
                        <span style={{width:'auto',color:'#3B78DD',cursor:'pointer'}} onClick={()=>{this.setState({isNoneCode:false},BuildVCode('feature-page-vcode')); }}>获取验证码</span>
                        :
                        <VCode id={'feature-page-vcode'} style={{height:'22px'}} onClick={() => BuildVCode('feature-page-vcode')}/>
                    }
                    value={VerificationCode}
                    onChange={(e) => SaveInputVCode(e.target.value)}/>
                <Space/>
                <Button className={'btn'}
                        style={{width: '100%', background: '#3B78DD', borderRadius: '10px', marginTop: '10px'}}
                        type="primary" onClick={() => Login()}>立即登录</Button>
                <Span onClick={this.forgetPassword}>忘记密码?</Span>
                <Ways>
                    <p>—— 其他方式登录 ——</p>
                    <OtherWayContainer>
                        <span className={'iconfont icon-wechat'} key={'icon-wechat'}
                              style={{color: '#60be02', textAlign: 'center'}}/>
                        <span className={'iconfont icon-qq'} key={'icon-qq'}
                              style={{color: '#1296db', textAlign: 'center'}}/>
                    </OtherWayContainer>
                </Ways>
            </Form>
            <PolishConfirm visible={this.state.confirmVisible}
                           onCancel={() => this.setState({confirmVisible: false})}
            >
                {
                    1
                }
            </PolishConfirm>
        </Fragment>
    }
}

const mapStateToProps = (state) => {
    return {
        VerificationCode: state.getIn(['window', 'VerificationCode']),
        height: state.getIn(['window', 'height']),
        account: state.getIn(['login', 'account']),
        password: state.getIn(['login', 'password'])
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        handleInputAccount(e) {
            dispatch(actions.handleAccount(e))
        },
        handleInputPassword(e) {
            dispatch(actions.handlePassword(e))
        },
        Login(user) {
            if (!queryState('window', 'VerificationCode')) {
                errorMsg("请先输入验证码!");
                return;
            }
            dispatch({type: INIT_USER_INFO_SAGA});
        }
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(LoginView);
